import { useState,useEffect } from "react";
import "./App.css";

const url = 'http://geek.itheima.net/v1_0/channels'

function Son(props){
  console.log(props)
  // props.name ='hello'
  return (
    <div>A:this is son
      <span>name is {props.name}</span>
      {props.children}
      <button onClick={()=>{props.onGetMsg('hello Tom')}}>传递数据</button>
    </div>
  )
}

function SonB({msg}){
  return (
    <div>B:this is Son 传递的数据 {msg}</div>
  )
}


function App(){
  let name = 'jack'
  let [msg,setMsg] = useState('hello')
  const getMsg = (msg)=>{
    console.log(msg)
    setMsg(msg)
  }
  const [list,setList] = useState([])
  useEffect(()=>{
    async function getList(params) {
      const res = await fetch(url)
      const jsonRes = await res.json();
      console.log('json',jsonRes);
      setList(jsonRes.data.channels)
    }
    getList()

  },[])
  return (
    <div>
     <h1>这是父组件</h1>
     <Son 
     name={name}
     age={20}
     cb={()=>{return 123}}
     isTrue={true}
     list={['Vue','React']}
     obj={{name:'jack',age:20}}
     onGetMsg={getMsg}
     
     >
      <span>this is span</span>
     </Son>
     <SonB msg={msg}></SonB>
     <ul>
      {list.map(item=>(<li key={item.id}>{item.name}</li>))}
     </ul>
    </div>
  )
}

export default App;